<template>
    <div class="demo-card-wide mdl-card mdl-shadow--2dp animate__animated animate__fadeIn">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">{{ commodity_name }}</h2>
        </div>
        <div class="mdl-card__supporting-text commodity">
            填写您的收货信息以发出订单
            <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
                <tbody>
                    <tr class="tr">
                        <td class="mdl-data-table__cell--non-numeric">数量</td>
                        <td>
                            <!-- Icon button -->
                            <button class="mdl-button mdl-js-button mdl-button--icon" @click="removeButtonOnclick">
                                <i class="material-icons">remove</i>
                            </button>
                            <div class="mdl-textfield mdl-js-textfield" style="width: 80px;">
                                <input class="mdl-textfield__input" style="text-align:center" type="text"
                                    pattern="-?[0-9]*(\.[0-9]+)?" id="input_num" value="1" v-on:input="count">
                                <label class="mdl-textfield__label" for="input_num"></label>
                                <span class="mdl-textfield__error">Input is not a number!</span>
                            </div>
                            <!-- Icon button -->
                            <button class="mdl-button mdl-js-button mdl-button--icon" @click="addButtonOnclick">
                                <i class="material-icons">add</i>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td class="mdl-data-table__cell--non-numeric">收货人</td>
                        <td>
                            <div class="mdl-textfield mdl-js-textfield" style="width: 210px;">
                                <input class="mdl-textfield__input" type="text" id="input_consignee">
                                <label class="mdl-textfield__label" for="input_consignee">Text...</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="mdl-data-table__cell--non-numeric">收货人电话</td>
                        <td>
                            <div class="mdl-textfield mdl-js-textfield" style="width: 210px;">
                                <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?"
                                    id="input_phone">
                                <label class="mdl-textfield__label" for="input_phone">Text...</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="mdl-data-table__cell--non-numeric">收货人地址</td>
                        <td>
                            <div class="mdl-textfield mdl-js-textfield" style="width: 210px;">
                                <input class="mdl-textfield__input" type="text" id="input_address">
                                <label class="mdl-textfield__label" for="input_address">Text...</label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            总金额: {{ gross_amount }} CNY
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" @click="backToMainMenu">
                再想想
            </a>
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" @click="buyButtonOnclick">
                立刻下单
            </a>
        </div>
        <div class="mdl-card__menu">
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                <i class="material-icons">share</i>
            </button>
        </div>
    </div>
</template>

<script>
export default {
    setup() {
        return {}
    },
    props: [
        "backToMainMenu",
    ],
    data() {
        return {
            commodity: null,
            commodityid: null,
            commodity_name: "未知商品名称",
            commodity_price: 0,

            gross_amount: 0,
        }
    },
    methods: {
        addButtonOnclick() {
            var input = document.getElementById("input_num");
            var num = parseInt(input.value)
            input.value = num + 1
            this.count()
        },
        removeButtonOnclick() {
            var input = document.getElementById("input_num");
            var num = parseInt(input.value)
            if (num > 0) input.value = num - 1
            this.count()
        },
        buyButtonOnclick() {
            var num = parseInt(document.getElementById("input_num").value)
            var consignee = document.getElementById("input_consignee").value
            var phone = document.getElementById("input_phone").value
            var address = document.getElementById("input_address").value

            if (num == "" || consignee == "" || phone == "" || address == "") {
                this.$parent.msg("有未填完的信息")
            }
            else if (!this.onlyNum(document.getElementById("input_num").value)) {
                this.$parent.msg("不是合法的数量")
            }
            else if (!this.onlyNum(phone)) {
                this.$parent.msg("不是合法的电话号码")
            }
            else {
                this.$axios({
                    method: "post",
                    url: "/welcome/buy",
                    dataType: "json",
                    data: {
                        // "id": 0,
                        "buyerid": this.$parent.user.id,
                        "consignee": consignee,
                        "phone_num": phone,
                        "address": address,
                        "quantity": num,
                        "commodity": this.commodity_name,
                        "commodityid": this.commodityid,
                        "amount": num * this.commodity_price
                    }
                }).then((res) => {
                    if (res.data.code == "0") {
                        this.$parent.msg("成功下单")
                        this.backToMainMenu()
                    } else {
                        this.$parent.msg(res.data.mes)
                    }
                })
            }
        },
        setInfo(commodity) {
            this.commodityid = commodity.id
            this.commodity_name = commodity.name
            this.commodity_price = parseFloat(commodity.price)
            this.gross_amount = this.commodity_price
        },
        count() {
            var input = document.getElementById("input_num");
            var num = parseInt(input.value)
            this.gross_amount = parseInt(num) * this.commodity_price
        },
        onlyNum(str) {
            var reg = /^[\d]+$/
            return reg.test(str)
        },
    }
}
</script>

<style lang="scss" scoped>
.demo-card-wide.mdl-card {
    width: 512px;
}

.demo-card-wide>.mdl-card__title {
    color: #fff;
    height: 176px;
    background: url('../assets/img/shop.jpg') center / cover;
}

.demo-card-wide>.mdl-card__menu {
    color: #fff;
}

.commodity {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 20px;
    margin: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.tr {
    line-height: 60px;
}
</style>